<template>
    <el-drawer
    :title="this.$t('titles.softwareUpdate')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="updateBox"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer">
        <div class="updateCom">
            <div class="flex modulContent">
                <el-radio-group v-model="updateType" @change="chooseUpdate">
                    <div class="updateItem"><el-radio :label="onLineAuto">{{ this.$t("updates.online")}}</el-radio></div>
                </el-radio-group>
            </div>
            <div class="flex formBtns">
                <el-button size="small" type="primary" @click="subUpdate">{{ this.$t("buttons.updateNow")}}</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import { showUpdate, submitupdate } from '../js/update';
export default {
    name: 'update',
    components:{

    },
    data(){
        return{
            drawer: this.$store.state.showUpdate,
            direction: 'btt',
            closable: true,
            showClose: false,

            onLineAuto:'online',
            offLineAuto:'offline',
            dbparam:'dbparam',
            openssh:'openssh',
            updateType: '',
            updateString:'',
            updateTypeString:{
                onlineAuto: "update"
            }
        }
    },
    methods:{
      chooseUpdate:function(e){
          let that = this;
          switch(e){
              case 'online':
                that.$notify({
                    title: this.$t("titles.warning"),
                    message: this.$t("messages.connectNetwork"),
                    type: 'warning',
                    position: 'top-left',
                    offset: 100
                });
                that.updateString = that.updateTypeString.onlineAuto;
                break;
              default:
                  break;
          }
      },

      /**
       * 提交更新
       * **/
      subUpdate:function(){
          let that = this;
          if(this.updateType === ''){
            that.$notify({
                    title: this.$t("titles.warning"),
                    message: this.$t("messages.selectUpdateType"),
                    type: 'warning',
                    position: 'top-left',
                    offset: 100
                });
            return
          }
          that.$store.commit('switchWhiteMask', false);
          that.$store.commit('switchUpdate', false);
          submitupdate(this.updateType, this.updateString);
          showUpdate(false);
      },

      //关闭模态框
        closeDrawer: function(){
            showUpdate(false)
        }
    },

    //属性监听
    watch:{
       "$store.state.showUpdate": function(val){
           this.drawer = val;
        }
    }

}
</script>

<style scoped lang="less">
 .updateCom{
     padding: 0 15px;
     width: 100%;
     .modulContent{
        color: #666666;
        margin: 16px 0 30px 0 ;
        .updateItem{
            margin-top: 14px
        }
    }
    .formBtns{
        padding: 0 5px;
        margin-top: 15px;
        button{
            width: 100%;
        }
    }
 }
 
 .el-radio{
     white-space: pre-wrap;
 }
</style>